import React, {PureComponent} from "react";
import {
    changeInvoice2,
    changeSettlement2,
    hideEditDateAndRemarkModal,
    query,
    queryExportLog,
    updateEditDateAndRemarkModal
} from "./actions";
import {connect} from "react-redux";
import {DatePicker, Form, Input, Modal} from "antd";
import {formItemLayout} from "../../lib/ui";
import {formatDate} from "../../lib/func";
import {getPrincipal} from "../../lib/identity";

const {TextArea} = Input;

class EditDateAndRemarkModal extends PureComponent {
    handleExport = () => {
        const {form: {validateFields}, dispatch, field, value, logId, remark} = this.props;
        validateFields((err, values) => {
            if (!err) {
                const data = {};
                data[field] = formatDate(value);
                data.type = "IN";
                data.logId = logId;
                data.remark = remark;
                data.opId = getPrincipal().id;
                if (field === "invoiceDate") {
                    dispatch(changeInvoice2(data)).then(() => {
                        dispatch(queryExportLog());
                        dispatch(query({"userId": getPrincipal().id}));
                        dispatch(hideEditDateAndRemarkModal());
                    });
                } else if (field === "settlementDate") {
                    dispatch(changeSettlement2(data)).then(() => {
                        dispatch(queryExportLog());
                        dispatch(query({"userId": getPrincipal().id}));
                        dispatch(hideEditDateAndRemarkModal());
                    });
                }
            }
        });
    };

    handleCancel = () => {
        const {dispatch} = this.props;
        dispatch(hideEditDateAndRemarkModal());
    };

    onChangeInvoiceDate = (value, dateString) => {
        const {dispatch} = this.props;
        dispatch(updateEditDateAndRemarkModal({value: value}));
    };

    onChangeSettlementDate = (value, dateString) => {
        const {dispatch} = this.props;
        dispatch(updateEditDateAndRemarkModal({value: value}));
    };

    changeRemark = ({target: {value}}) => {
        const {dispatch} = this.props;
        dispatch(updateEditDateAndRemarkModal({remark: value}));
    };

    render() {
        const {
            visible, loading, form: {getFieldDecorator}, field, value
        } = this.props;
        return (
            <Modal
                title="编辑"
                visible={visible}
                onOk={this.handleExport}
                onCancel={this.handleCancel}
                confirmLoading={loading}
                okText="确定"
                cancelText="取消"
                width="400px"
            >

                {field === "invoiceDate" ? <Form.Item {...formItemLayout} label="开票日期">
                    <DatePicker onChange={this.onChangeInvoiceDate} placeholder="开票日期"/>
                </Form.Item> : ""}
                {field === "settlementDate" ? <Form.Item {...formItemLayout} label="结算日期">
                    <DatePicker onChange={this.onChangeSettlementDate} placeholder="结算日期"/>
                </Form.Item> : ""}
                <Form.Item {...formItemLayout} label="备注">
                    {getFieldDecorator("remark")(<TextArea onChange={this.changeRemark}
                                                           placeholder="备注"/>)}
                </Form.Item>
            </Modal>
        );
    }
}

const mapStateToProps = state => {
    return {
        ...state.zadOrderReceivable.edit
    };
};

export default connect(mapStateToProps)(Form.create()(EditDateAndRemarkModal));
